<template>
	<view>
		<view class="wrapper">
			<scroll-view scroll-x class="nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="i.id==TabCur?'active cur':''" v-for="i in tabs" :key="i.id" @tap="tabSelect"
					 :data-id="i.id">
						{{i.text}}
					</view>
				</view>
			</scroll-view>

			<view class="list" v-show="TabCur == 0">
				<view class="card" v-for="(i,k) in list" :key="k">
					<view class="top">
						<view class="left">
							<view style="font-size: 24rpx;margin-right: 10rpx;">
								UID
							</view>
							<view style="color: #fff;font-size: 40rpx;">
								{{i.member.invite_code}}
							</view>
							<view class="cu-tag radius sm" :class="'level'+i.member.level+'-tag'">
								{{i.level_name}}
							</view>
						</view>
						<view class="right">
							USDT
						</view>
					</view>
					<view class="btm">
						<view class="time">
							{{i.created_at}}
						</view>
						<view class="money">
							+{{i.total}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="list" v-show="TabCur == 1">
				<view class="card" v-for="(i,k) in list2" :key="k">
					<view class="top">
						<view class="left">
							<view style="font-size: 24rpx;margin-right: 10rpx;">
								UID
							</view>
							<view style="color: #fff;font-size: 40rpx;">
								{{i.member.invite_code}}
							</view>
							<view class="cu-tag radius sm" :class="'level'+i.member.level+'-tag'">
								{{i.level_name}}
							</view>
						</view>
						<view class="right">
							USDT
						</view>
					</view>
					<view class="btm">
						<view class="time">
							{{i.created_at}}
						</view>
						<view class="money">
							+{{i.total}}
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				tabs: [{
						id: 0,
						text: '矿机收益'
					},
					{
						id: 1,
						text: '质押收益'
					}],
					list: [],
					list2: []
				}
			},
			onLoad() {
					this.$u.get('/member/reward/list').then(res => {
						this.list = res.data.result.member_reward
						this.list2 = res.data.result.cft_reward
					})
				},
				methods: {
					tabSelect(e) {
						this.TabCur = e.currentTarget.dataset.id;
						this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
					},
				}
		}
</script>

<style lang="scss" scoped>
	.nav {
		background: #242644;
		color: #B9B9C1;
		margin-bottom: 50rpx;

		.active {
			color: #00D388;
		}
	}

	.card {
		background: #1B1B3B;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 6rpx 0;

			.left {
				display: flex;
				align-items: center;

				.cu-tag {
					background: #00D688;
					color: #fff;
					margin-left: 40rpx;
				}
			}

			.right {
				font-size: 28rpx;
			}
		}

		.btm {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 6rpx 0;

			.money {
				color: #00DF8D;
				font-size: 40rpx;
			}
		}
	}
</style>
